<%--
  Created by IntelliJ IDEA.
  User: w7851
  Date: 2018/5/16
  Time: 7:49
  新用户注册页面
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册新用户</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>

    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style type="text/css">
        #content {
            max-width: 750px;
            padding: 8px 16px;
        }

        .form-control {
            height: 44px;
        }
    </style>
</head>
<body>
<div id="content">

    <h3 style="text-align: center">新用户注册</h3>

    <form method="post" action="/mobile">
        <input name="method" value="regNew" style="display: none">
        <div class="form-group">
            <!--<label for="phone">手机号码</label>-->
            <input id="phone" name="phonenum" type="number" maxlength="11" class="form-control"
                   placeholder="账号，11位手机号码">
            <span class="help-block"></span>
        </div>

        <div class="form-group">
            <!--<label for="passwd">登陆密码</label>-->
            <input id="passwd" name="passwd" type="password" class="form-control" placeholder="密码，请输入最少6位">
            <span class="help-block"></span>
        </div>

        <div class="form-group">
            <!--<label for="passwd2">再次输入密码</label>-->
            <input id="passwd2" name="passwd2" type="password" class="form-control" placeholder="确认，再次输入密码">
            <span class="help-block"></span>
        </div>

        <div class="form-group">
            <!--<label for="alipay">提款用支付宝</label>-->
            <input type="text" name="alipay" class="form-control" id="alipay" placeholder="支付宝账号，用于提款">
            <span class="help-block"></span>
        </div>

        <div class="form-group">
            <!--<label for="alipay">提款用支付宝</label>-->
            <input type="text" name="realname" class="form-control" id="realname" placeholder="真实姓名">
            <span class="help-block"></span>
        </div>

        <div class="form-group">
            <!--<label for="recoid">推荐人ID</label>-->
            <input type="text" name="recoid" class="form-control" id="recoid" placeholder="请输入推荐人ID">
            <span class="help-block"></span>
        </div>

        <div class="form-group">
            <!--<label for="recoid">图片验证码</label>-->
            <input id="code" type="text" name="code" class="form-control" placeholder="请输入图片验证码">
            <span class="help-block"></span>
        </div>

        <img src="/mobile?method=getyzm" style="width: 150px;height: 40px" onclick="changeImg()">


        <button type="submit" class="btn btn-success" style="display: block;width: 100%;height:44px;margin-top: 16px">
            注册新用户
        </button>
    </form>
    <a href="/mobile?method=gomobilepage&page=login" type="submit" class="btn btn-info"
       style="display: block;width: 100%;height:44px;margin-top: 8px;line-height: 30px">使用已有用户登陆
    </a>
</div>
</body>
<script>

    $("#phone").blur(function () {
        var vaalue = $(this).val();
        var ok = /\d{11}/.test(vaalue) && (vaalue.length == 11);
        if (!ok) {
            $(this).next().show().html("请输入国内11位手机号码");
            $(this).parent().addClass("has-error");
            return;
        }
        if (ok) {
            $(this).next().hide();
            $(this).parent().removeClass("has-error");
        }

        if (ok) {
            $.get("/mobile", {method: "isuserreged", user: vaalue}, function (data) {
                var correct = "ok";
                if (data == correct) {
                    $("#phone").next().hide();
                    $("#phone").parent().removeClass("has-error");
                } else {
                    $("#phone").next().show().html("该手机已注册，您可以直接登陆");
                    $("#phone").parent().addClass("has-error");
                }
            });
        }
    });

    $("#passwd").blur(function () {
        var vaalue = $(this).val();
        var ok = vaalue.length > 5;
        if (ok) {
            $(this).next().hide();
            $(this).parent().removeClass("has-error");
        } else {
            $(this).next().show().html("请输入最少6位密码");
            $(this).parent().addClass("has-error");
        }
    });

    $("#recoid").blur(function () {
        var value = $(this).val();
        if (value == "") {
            //不填推荐人的情况
            $(this).next().hide();
            $(this).parent().removeClass("has-error");
            console.log("no recoid");
            return;
        } else {
            $.get("/mobile", {method: "verifytuijian", reco: value}, function (data) {
                var correct = "ok";
                if (data == correct) {
                    $("#recoid").next().hide();
                    $("#recoid").parent().removeClass("has-error");
                } else {
                    $("#recoid").next().show().html("无此推荐人");
                    $("#recoid").parent().addClass("has-error");
                }
            })
        }
    });

    $("#passwd2").blur(function () {
        var ok = $(this).val() == $("#passwd").val();
        if (ok) {
            $(this).next().hide();
            $(this).parent().removeClass("has-error");
        } else {
            $(this).next().show().html("密码不一致");
            $(this).parent().addClass("has-error");
        }
    });

    $("#code").blur(function () {
        var code = $("#code").val();
        console.log(code);
        $.get("/mobile", {method: "verifycode", code: code}, function (data) {
            console.log(data);
            var correct = "ok";
            if (data == correct) {
                $("#code").next().hide();
                $("#code").parent().removeClass("has-error");
            } else {
                $("#code").next().show().html("验证码错误");
                $("#code").parent().addClass("has-error");
            }
        });
    });

    function changeImg() {
        var imgSrc = $("img");
        var src = "/mobile?method=getyzm&t=" + (new Date().getTime());
        console.log(src);
        imgSrc.attr("src", src);
    }

    $("form").submit(function () {
        $("#phone").blur();
        $("#passwd").blur();
        $("#passwd2").blur();
        $("#code").blur();
        $("#recoid").blur();

        var canreg = true;
        $("#phone,#passwd,#passwd2,#code,#recoid").each(function () {
            if ($(this).parent().hasClass("has-error")) {
                canreg = false;
            }
        });

        console.log(canreg);
        if (!canreg) {
            // YDUI.dialog.toast("部分资料未填写正确!", "error");
            alert("部分资料未填写正确!");
            return false;
        }
    });

</script>
</html>
